// src/pages/patient/index.tsx
import styles from "@styles/patient.module.scss";
import { Helmet } from "react-helmet";
import Header from "@shared/header";
import classNames from "classnames";
import {useRequestPatientsQuery} from "@store/apiSlice/patientApiSlice";
import useLoading from "@hooks/useLoading";
import {useEffect, useState} from "react";
import {Popup} from "antd-mobile";
import EditPatient from "@pages/patient/widgets/edit";
import {useNavigate, useSearchParams} from "react-router-dom";
import {useDispatch} from "react-redux";
import {saveConsult} from "@store/slices/consultSlice";

export default function Patient() {
    // 发送请求获取患者列表
    const { data, isSuccess, isLoading } = useRequestPatientsQuery(undefined);
    // 加载中用户提示
    useLoading(isLoading, isSuccess);
    // 控制编辑患者弹框的显示和隐藏
    const [visible, setVisible] = useState(false);
    // 用于存储要编辑的患者对象
    const [patient, setPatient] = useState<undefined | Patient>();
    //获取查询参数
    const [urlParams] = useSearchParams()
    //标识当前进入的事你的家庭档案页面还是选择患者页面
    const isSelect = urlParams.has("select");
    //用于记录用户选择的患者id
    const [id,setId] = useState<undefined | string>()
    //获取dispatch方法
    const dispatch = useDispatch();
    //获取页面跳转方法
    const navigate = useNavigate();
    useEffect(()=>{
        //患者列表没有获取成功
        if(!isSuccess) return;
        //如果患者列表为空
        if(data.data.length===0){
            //清空id
            setId(undefined);
            //清空本地患者id
            dispatch(saveConsult({patientId:undefined}))
        }else {
            //查找默认患者
            let selectPatient = data.data.find((item)=>item.defaultFlag===1)
            //如果默认患者不存在，选中列表第一个患者
            if(typeof selectPatient=== "undefined") selectPatient = data.data[0];
            //存储选择患者id
            setId(selectPatient.id)
        }
    },[data?.data,dispatch,isSuccess])
    return (
        <>
            <Helmet>
                <title>优医问诊-家庭档案</title>
            </Helmet>
            <div className={styles.page}>
                <Header  title={isSelect ? "选择患者" : "家庭档案"} />
                <div className={styles.message}>最多可添加6人</div>
                {isSuccess &&
                    data.data.map((item) => (
                        <div
                            key={item.id}
                            className={classNames(styles.item, {
                                [styles.active]: item.id === id
                            })}
                            onClick={() => setId(item.id)}
                        >
                            <div className={styles.info}>
                                <div className={styles.i_1}>
                                    <span className={styles.name}>{item.name}</span>
                                    <span className={styles.id}>{item.idCard}</span>
                                    {item.defaultFlag === 1 && <span className={styles.default}>默认</span>}
                                </div>
                                <div className={styles.i_2}>
                                    <span className={styles.sex}>{item.genderValue}</span>
                                    <span className={styles.age}>{item.age}岁</span>
                                </div>
                            </div>
                            <button className={styles.edit}  onClick={() => {
                                setVisible(true);
                                setPatient(item);
                            }}>
                                <img src={require("@icons/user/edit.svg").default} alt="编辑患者" />
                            </button>
                        </div>
                    ))}

                <div className={styles.add}  onClick={() => {
                    setVisible(true);
                    setPatient(undefined);
                }}>
                    <img src={require("@icons/user/add.svg").default} alt="添加患者" />
                    <span>添加患者</span>
                </div>
                <Popup visible={visible} position="right" bodyStyle={{ width: "100vw" }}>
                    <EditPatient patient={patient}  setVisible={setVisible}/>
                </Popup>
                {isSelect && (
                    <div
                        className={classNames(styles.next, {
                            [styles.disabled]: typeof id === "undefined",
                        })}
                        onClick={() => {
                            if (typeof id !== "undefined") {
                                // 保存患者 id
                                dispatch(saveConsult({ patientId: id }));
                                // 页面跳转
                                navigate("/consultPay");
                            }
                        }}
                    >
                        下一步
                    </div>
                )}
            </div>
        </>
    );
}